<!DOCTYPE HTML>
<html lang="zh-CN" manifest="h5.manifest">
    <head>
        <meta charset="utf-8"/>
        <title>大学加调查问卷</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href="./bootstrap.min.css" rel="stylesheet">
        <script src="./jquery-1.11.2.min.js"></script>
        <script src="./bootstrap.min.js"></script>
        <script>
            //打开数据库
            var db = openDatabase('contactdb2.db', '', 'local database demo', 204800);
            //保存数据
            function save() {
                var username = document.getElementById("iptusername").value;
                var mobile = document.getElementById("iptmobile").value;
                var sex = $('input:radio[name=sex]:checked').val();
                var zhuangye = document.getElementById("iptzhuangye").value;
                var q1 = $('input:radio[name=q1]:checked').val();
                var q2 = $('input:radio[name=q2]:checked').val();
                var q3 = $('input:radio[name=q3]:checked').val();
                var q4 = $('input:radio[name=q4]:checked').val();
                var q5 = $('input:radio[name=q5]:checked').val();
                var q6 = $('input:radio[name=q6]:checked').val();
                var q7 = $('input:radio[name=q7]:checked').val();
                var q8 = $('input:radio[name=q8]:checked').val();
                var q9 = $('input:radio[name=q9]:checked').val();
                var q10 = $('input:radio[name=q10]:checked').val();
                var q11 = $('input:radio[name=q11]:checked').val();
                alert(q1);
                //创建时间
                var time = new Date().getTime();
                db.transaction(function(tx) {
                    tx.executeSql('insert into contact values(NULL,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,0)', [username, mobile, sex, zhuangye,q1,q2,q3,q4,q5,q6,q7,q8,q9,q10,q11,time], onSuccess, onError);
                });
            }

            //sql语句执行成功后执行的回调函数
            function onSuccess(tx, rs) {
                alert("操作成功");
                loadAll();
            }

            //sql语句执行失败后执行的回调函数
            function onError(tx, error) {
                alert("操作失败，失败信息：" + error.message);
            }

            //将所有存储在sqlLite数据库中的联系人全部取出来
            function loadAll() {
                var list = document.getElementById("list");
                db.transaction(function(tx) {
                    //如果数据表不存在，则创建数据表
                    var cat_sql='create table if not exists contact(uid integer PRIMARY KEY autoincrement,';
                    cat_sql+='username text,mobile text,sex text,zhuangye text,q1 text,q2 text,q3 text,q4 text,q5 text,q6 text,';
                    cat_sql+='q7 text,q8 text,q9 text,q10 text,q11 text,createtime INTEGER,isstatus INTEGER)';
                    tx.executeSql(cat_sql, []);
                    //查询所有联系人记录
                    tx.executeSql('select * from contact', [], function(tx, rs) {
                        if (rs.rows.length > 0) {
                            var result = '<table class="table">';
                            result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>性别</th><th>专业</th><th>q1</th><th>q2</th><th>q3</th><th>q4</th>";
                            result += "<th>q5</th><th>q6</th><th>q7</th><th>q8</th><th>q9</th><th>q10</th><th>q11</th>";
                            result += "<th>添加时间</th><th>操作</th></tr>";
                            for (var i = 0; i < rs.rows.length; i++) {
                                var row = rs.rows.item(i);
                                //转换时间，并格式化输出
                                var time = new Date();
                                time.setTime(row.createtime);
                                var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
                                //拼装一个表格的行节点
                                result += "<tr><td>" + (i + 1) + "</td><td>" + row.username + "</td><td>" + row.mobile + "</td><td>" + row.sex + "</td><td>";
                                result +=row.zhuangye + "</td><td>" + row.q1 + "</td><td>"+ row.q2 + "</td><td>"+ row.q3 + "</td><td>"+ row.q4 + "</td><td>"+ row.q5 + "</td><td>";
                                result +=row.q6 + "</td><td>"+ row.q7 + "</td><td>"+ row.q8 + "</td><td>"+ row.q9 + "</td><td>"+ row.q10 + "</td><td>"+ row.q11 + "</td><td>";
                                result += timeStr + "</td><td><input type='button' value='删除' onclick='del(" + row.uid + ")'/></td></tr>";
                            }
                            list.innerHTML = result;
                        } else {
                            list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
                        }
                    });
                });
            }


            Date.prototype.format = function(format) {
                var o = {
                    "M+" : this.getMonth() + 1, //month
                    "d+" : this.getDate(), //day
                    "h+" : this.getHours(), //hour
                    "m+" : this.getMinutes(), //minute
                    "s+" : this.getSeconds(), //second
                    "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
                    "S" : this.getMilliseconds() //millisecond
                }
                if (/(y+)/.test(format))
                    format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                return format;
            }
            //删除联系人信息
            function del(uid) {
                db.transaction(function(tx) {
                    //注意这里需要显示的将传入的参数phone转变为字符串类型
                    tx.executeSql('delete from contact where uid=?', [String(uid)], onSuccess, onError);
                });
                loadAll();
            }
        </script>
    </head>
    <body onload="loadAll()">
        <nav class="main-nav navbar navbar-inverse navbar-static-top clearfix">
            <!-- navbar-fixed-top -->
            <div class="container-fluid">
                <a class="navbar-brand" href="http://www.iic.cn/"> 北理工学生互联网创业问卷调查</a>
            </div>
        </nav>
        <div id="main-container" class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <h1>北理工学生互联网创业问卷调查</h1>
                    <div id="list" style="display: block;"></div>
                    <button type="button" class="btn btn-default" onclick="save()">
                        感谢您的参与，谢谢！
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>